<template>
  <div id="wrap">
    <!-- 顶部 -->
    <header>
      <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon
            :name="require('../../assets/HealthMall_img/icon转发@2x.png')"
            size="18"
          />
        </template>
      </van-nav-bar>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品介绍 -->
    <div class="cell_box">
      <van-cell
        :title="'￥' + price"
        :value="'已售' + sale"
        size="large"
        :label="title"
      />
    </div>
    <!-- 规格 -->
    <div class="Specifications">
      <van-cell is-link @click="openSpecifications"
        >规格
        <p>{{ itemname }}</p>
      </van-cell>
      <van-popup
        v-model:show="show"
        closeable
        position="bottom"
        :style="{ height: '55%' }"
      >
        <div class="price">
          <van-cell center :title="'￥' + price" :label="'已选择' + itemname" />
        </div>
        <div class="item">
          <p>规格</p>
          <span
            v-for="(item, index) in space"
            :key="index"
            @click="changenum(item)"
            >{{ item }}</span
          >
        </div>
        <div class="itemnum">
          <p>购买数量</p>
          <van-stepper v-model="value" integer />
          <div class="tobuy">
            <span class="span gotocar">加入购物车</span>
            <span class="span nowbuy">立刻购买</span>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- <div class="parameter">
      <van-cell is-link @click="showPopup"
        >参数
        <p>商品明细</p>
      </van-cell>
      <van-popup
        v-model:show="show"
        closeable
        position="bottom"
        :style="{ height: '51%' }"
        ><div>111111</div>
      </van-popup>
    </div> -->

    <!-- 商店 -->
    <div class="store">
      <img src="../../assets/HealthMall_img/果果.png" alt="" />
      <van-cell center title="果果品质生活馆" value="进店 >" />
    </div>
    <!-- 详情图片 -->
    <van-nav-bar title="详情" />
    <div class="det_img">
      <ul>
        <li v-for="(item, index) in detailimg" :key="index">
          <img :src="item" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  props: ["id"],
  setup(props) {
    //   变量
    const show = ref(false);
    const router = useRouter();
    const store = useStore();
    const banners = computed(() => store.state.mallDetailModul.banners);
    const title = computed(() => store.state.mallDetailModul.title);
    const price = computed(() => store.state.mallDetailModul.price);
    const sale = computed(() => store.state.mallDetailModul.sale);
    const detailimg = computed(() => store.state.mallDetailModul.detailimg);
    const space = computed(() => store.state.mallDetailModul.space);
    const itemname = computed(() => store.state.mallDetailModul.num);

    const value = ref("");
    //  方法
    const getdetailapi = () => store.dispatch("getdetailapi", { id: props.id });

    const openSpecifications = () => {
      show.value = true;
    };
    const onClickLeft = () => {
      router.push("/home/healthMall");
    };
    const changenum = (item) => {
      store.commit("change", { name: item });
    };
    onMounted(() => {
      getdetailapi();
    });
    //  暴露
    return {
      // 变量
      show,
      store,
      banners,
      title,
      price,
      sale,
      detailimg,
      space,
      itemname,
      value,

      //  方法
      openSpecifications,
      getdetailapi,
      onClickLeft,
      changenum,
    };
  },
};
</script>

<style lang="less">
@import "../../assets/css/detail.less";
</style>
